<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.10.1.min.js"></script>

</head>
<body>
    <h3 id="title"  demo="wh2107-daydayup" class="one demo" >jQuery 学习 </h3>
    <ul class="list">
        <li class="one first">item_01</li>
        <li class="two">item_02</li>
        <li class="three">item_03</li>
        <li>item_04</li>
        <li>item_05</li>
        <li>item_06</li>
        <li>item_07</li>
        <li>item_08 <span> hello </span></li>
        <li>item_09</li>
        <li class="last">item_10</li>
    </ul>
    
    <script>
  
        // first()  匹配第一个元素
        // last()    匹配最后一个元素
        // eq(index )


        // $(".list li").first().css({background:'red',fontSize:'20px'})
        // $(".list li").last().css({background:'orange',fontSize:'40px'})
        // $(".list li").eq(3).css({background:'purple',fontSize:'60px'})

        // hasClass 匹配是否有这个class 名称
        // 多个元素匹配
        // console.log($(".list li").hasClass("one"))
        // // 单个元素匹配
        // console.log( $(".list li").eq(1).hasClass("one"))

        // slice 裁剪  
        // console.log($(".list li").slice(1,4))
        // $(".list li").slice(1,4).css({background:'orange',fontSize:'40px'})

        // has 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
        //  $(".list li").has('span').css({background:'orange',fontSize:'40px'})


        // filter  过滤    $.each 
        // $(".list li").filter(".two").css({background:'orange',fontSize:'40px'})

        // 接受dom对象  和dom对象集合  
        // var first = document.getElementsByClassName("first")[0]
        // var start_end = document.querySelectorAll(".first , .last")
        // $(".list li").filter(first).css({background:'purple',fontSize:'60px'})
        //  $(".list li").filter(start_end).css({background:'purple',fontSize:'60px'})


        // 接受jquery 对象
        // $(".list li").filter($('.two')).css({background:'purple',fontSize:'60px'})


        // not   不包含
        // $(".list li").not('.two').css({background:'purple',fontSize:'60px'})
        // $(".list li").not(document.getElementsByClassName("first")[0]).css({background:'purple',fontSize:'60px'})
        // $(".list li").not(document.querySelectorAll(".first , .last")).css({background:'purple',fontSize:'60px'})
        // $(".list li").not($(".three")).css({background:'purple',fontSize:'60px'})


        // is  判断是否存在某个元素
        // console.log($(".list li").eq(0).is(".one"))
        // console.log($(".list li").eq(0).is(document.getElementsByClassName("first")[0]))
        // console.log($(".list li").is(document.getElementsByClassName("first")[0]))
        // console.log($(".list li").is(document.querySelectorAll(".first , .last"))) 
        // console.log($(".list li").eq(0).is($('.first')))
        // // $(".list li").eq(0).is(".one").css({background:'purple',fontSize:'60px'})  error
 

        // // map    
        // var $list = $(".list li").map(function(index,item){
        //     return $(this).text()
        // }).get()

        // console.log($list)

        // 查找后代元素
        // $(".list li").find("span").css({background:'purple',fontSize:'60px'})
        // $(".list ").find(".two").css({background:'purple',fontSize:'60px'})


        // prev 上一个    prevAll   prevUntil  当前元素往前寻找  匹配得到一个数组  0
        // $(".list ").find(".two").prev().css({background:'purple',fontSize:'60px'})
        // $(".last").prevUntil('.one').css({background:'purple',fontSize:'60px'})    //  
        $(".list li").prevUntil('.three').css({background:'purple',fontSize:'60px'})  //  


        // next 下一个    nextAll   nextUntil
        // $(".list ").find(".two").next().css({background:'purple',fontSize:'60px'})

        // siblings 兄弟元素
        // $(".list ").find(".two").siblings().css({background:'purple',fontSize:'60px'})
        // $(".list ").find(".two").css({background:'purple',fontSize:'60px'})

        // parent 父亲节点   .parent().parent().parent()
        // console.log($(".two").parent())
        // children 儿子节点
        // console.log($(".list").children())
        // $(".list").children().css({background:'purple',fontSize:'60px'})
    </script>
</body>
</html>